<template>
  <AcceptHandleHeadComponent
    ref="acceptHandleHeadRef"
    :ucolumns="ucolumns"
    :type="LableTitle.workToDoList"
    :needMoreQuery="true"
    :showCaseNoQuery="false"
    @onSearch="search"
    @onReset="reQuery"
  >
    <div slot="headLeft">
      <a-form-item style="display: flex; margin-bottom: 0px">
        <a-input v-model="queryParam.f_pername" placeholder="请输入姓名" allowClear style="height: 40px" />
      </a-form-item>
    </div>

    <!-- 其他查询条件 -->
    <div slot="more">
      <a-form layout="inline" class="accept_more_operate_moreForm">
        <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse" >
          <a-collapse-panel  :show-arrow="false" disabled key="1" style="font-weight: bold">
            <div slot="header" class="accept_more_operate_moreForm_collapse_head">
              <a-row :gutter="48" style="width: 100%">
                <a-col @click.stop="() => {}" :md="6" :sm="24">
                  <a-form-item label="预警类型：">
                    <a-select
                      v-model="queryParam.f_type"
                      style="width: 160px; font-weight: normal"
                      placeholder="请选择预警类型"
                      allowClear
                    >
                      <a-select-option v-for="item in Tp_crc_warnList" :key="item.value" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="6" :sm="24">
                  <a-form-item label="地点：">
                    <a-input v-model="queryParam.f_addr" style="width: 160px" placeholder="请输入地点" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="12" :sm="24">
                  <a-form-item label="收到时间">
                    <a-date-picker
                      v-model="queryParam.f_rectime"
                      :style="{ width: 'calc(50% - 12px)' }"
                      placeholder="开始日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="subtimeListen()"
                    />
                    ~
                    <a-date-picker
                      v-model="queryParam.f_rectime_01"
                      :style="{ width: 'calc(50% - 12px)' }"
                      placeholder="结束日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="subtimeListen()"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-form>
    </div>

    <!-- 表格数据 -->
    <template slot="content">
      <!-- :scroll="{ x: 1000, y: 550 }" -->
      <a-table
        :columns="ucolumns"
        :data-source="listData"
        :pagination="upagination"
        :loading="loading"
        rowKey="id"
        @change="tableChange"
        size="middle"
        :bordered="ubordered"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
        </span>

        <template slot="typeSlot" slot-scope="type">
          {{ type in Tp_crc_warn ? Tp_crc_warn[type].name : '未知' }}
        </template>

        <template slot="worktypeSlot" slot-scope="worktype, record">
          {{ worktype in Tp_crc_work ? Tp_crc_work[worktype].name : '未知' }}
          <!-- 督办 / 再办任务详情组件 -->
          <WorkSupRecord :record="record" />
        </template>

        <div slot="addrSlot" slot-scope="addr" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ addr }}</span>
            </template>
            {{ addr }}
          </a-tooltip>
        </div>

        <span slot="operation" slot-scope="text, record">
          <template>
            <a href="javascript:;" @click="view(record)">详情</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handle(record)">处理</a>
          </template>
        </span>
      </a-table>

      <a-drawer
        width="40%"
        :visible="editVisible"
        :body-style="{ paddingBottom: '80px' }"
        @close="editVisible = false"
        destroyOnClose
      >
        <template slot="title">
          <span>{{ isEdit ? '预警处置' : '处置记录' }}</span>

          <a-tag v-if="workObj.worktype" color="orange" style="margin-left: 8px">
            {{ Tp_crc_work[workObj.worktype].name }}
          </a-tag>
        </template>
        <WorkToDoEdit
          ref="workToDoEditRef"
          @close="s_close"
          @f_setStatus="s_setStatus"
          :workid="workid"
          :warnid="warnid"
          :isEdit="isEdit"
        />
      </a-drawer>
    </template>
  </AcceptHandleHeadComponent>
</template>

<script>
import { queryWorkList } from '@/api/correction/cre_work.js'
import { Tp_crc_warn, Tp_crc_warnList } from '@/enumeration/correction/Tp_crc_warn.js'
import { Tp_crc_work, Tp_crc_workValue } from '@/enumeration/correction/Tp_crc_work.js'
import { St_workValue } from '@/enumeration/St_work.js'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
import AcceptHandleHeadComponent from '@/views/accept/component/AcceptHandleHeadComponent.vue'
import { LableTitle } from '@/enumeration/LableTitle.js'
const ucolumns = [
  {
    title: '序号',
    width: 80,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' },
  },

  {
    title: '姓名',
    dataIndex: 'pername',
    key: 'pername',
    align: 'left',
    width: 120,
  },
  {
    title: '预警类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center',
    width: 120,
    scopedSlots: { customRender: 'typeSlot' },
  },
  {
    title: '地点',
    dataIndex: 'addr',
    key: 'addr',
    align: 'left',
    // width: 350,
    scopedSlots: { customRender: 'addrSlot' },
  },
  {
    title: '收到时间',
    dataIndex: 'rectime',
    key: 'rectime',
    align: 'center',
    width: 250,
  },
  {
    title: '处置类型',
    dataIndex: 'worktype',
    key: 'worktype',
    align: 'center',
    width: 250,
    scopedSlots: { customRender: 'worktypeSlot' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 250,
    fixed: 'right',
    scopedSlots: { customRender: 'operation' },
  },
]
export default {
  data() {
    return {
      Tp_crc_work: Tp_crc_work, //  社矫预警处置类型
      workObj: {}, // 预警处置任务
      warnid: null, // 预警信息id
      workid: null, // 预警任务id
      isEdit: false, // 是否编辑
      Tp_crc_warnList: Tp_crc_warnList, // 预警类型列表
      Tp_crc_warn: Tp_crc_warn, // 预警类型枚举
      ucolumns: ucolumns,
      queryParam: {
        f_pername: undefined, // 姓名
        f_addr: undefined, // 地点
        f_type: undefined,
        f_rectime: undefined, // 收到日期开始日期
        f_rectime_01: undefined, // 收到日期结束日期
        pageNumber: 1,
        pageSize: 20,
      },
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      },
      loading: false,
      ubordered: true, // 表格边框是否显示
      editVisible: false, // 编辑款是否展示
      currentUser: storage.get(APP_USER), // 登录人信息

      LableTitle: LableTitle,
      header: undefined,
      tableCountKey: 0,
      collapseKey: [], // 折叠面板key
    }
  },
  created() {
    //console.log('this.$route.query.queryParam.queryList', this.$route.query.queryParam)
    //let routeParam
    try {
      //routeParam = JSON.parse(JSON.stringify(this.$route.query.queryParam))
      this.queryParam = { ...this.queryParam, ...this.$route.query.queryParam }
    } catch {
      console.log('路由传参非json格式')
    }
    this.queryList()
  },
  methods: {
    // 搜索
    search() {
      this.queryParam.pageNumber = 1
      this.queryList()
    },
    s_close(isreload = false) {
      this.editVisible = false
      if (isreload) {
        this.queryList()
      }
    },
    // 子组件调用, 更新记录状态
    s_setStatus(worktype) {
      this.workObj.worktype = worktype
      if (worktype != Tp_crc_workValue.UNDO) {
        // 办结了一条, 刷新列表记录
        this.queryParam.pageNumber = 1
        this.queryList()
      }
    },
    // 处理操作
    handle(record) {
      this.$router.push({
        path: `/WorkToDoDetail/${record.id}/4`,
        query: {
          url: `/WorkToDoList`,
          queryParam: this.queryParam
        },
      })
    },
    // 查看操作
    view(record) {
      this.$router.push({
        path: `/WorkToDoDetail/${record.id}/3`,
        query: {
          url: `/WorkToDoList`,
          queryParam: this.queryParam
        },
      })
    },
    // 查询列表数据
    async queryList() {
      const queryParam = this.getCpQueryParam()
      this.loading = true
      queryParam.f_status = [St_workValue.UNDO, St_workValue.DOING]
      queryParam.f_userid = this.currentUser.userId
      const { data } = await queryWorkList(queryParam).finally(() => {
        this.loading = false
      })
      this.listData = data.records || []
      this.upagination.total = data.total
      this.upagination.current = data.current
      this.upagination.pageSize = data.size
    },
    // 接收时间监听判断开始结束日期是否合理
    subtimeListen() {
      if (
        this.queryParam.f_rectime > this.queryParam.f_rectime_01 &&
        this.queryParam.f_rectime &&
        this.queryParam.f_rectime_01
      ) {
        this.queryParam.f_rectime = undefined
      }
      if (
        this.queryParam.f_enddate > this.queryParam.f_enddate_01 &&
        this.queryParam.f_enddate &&
        this.queryParam.f_enddate_01
      ) {
        this.queryParam.f_enddate = undefined
      }
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery() {
      this.queryParam = {
        pageNumber: 1,
        pageSize: 20,
      }
      this.queryList()
    },
    // 复制查询对象
    getCpQueryParam() {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.f_rectime?.format) {
        cpQueryParam.f_rectime = this.queryParam.f_rectime.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_rectime_01?.format) {
        cpQueryParam.f_rectime_01 = this.queryParam.f_rectime_01.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_enddate?.format) {
        cpQueryParam.f_enddate = this.queryParam.f_enddate.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_enddate_01?.format) {
        cpQueryParam.f_enddate_01 = this.queryParam.f_enddate_01.format('YYYY-MM-DD') + ' 00:00:00'
      }
      cpQueryParam.f_type = this.queryParam.f_type ? [this.queryParam.f_type] : null
      return cpQueryParam
    },
    // 表格翻页
    tableChange(upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryList()
    },
  },
  components: {
    HEADERDEFINITION: () => import('@/views/customComponents/headerDefinition.vue'),
    WorkToDoEdit: () => import('@/views/correction/work/WorkToDoEdit.vue'),
    WorkSupRecord: () => import('@/views/correction/work/WorkSupRecord.vue'),
    AcceptHandleHeadComponent,
  },
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';

.formArea {
  margin-bottom: 30px;
}

.headerdefBox img {
  height: 20px;
  width: 20px;
}
.headerdefBox {
  // border: 1px solid red;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: end;
}

.collapseArea {
  border: none;
  .ant-collapse-item {
    border-bottom: none;
  }
  /deep/.ant-collapse-content {
    border-top: none;
  }
}
/deep/ .ant-collapse-header {
  background-color: #fff;
}
.collapseArea_header {
  .ant-form-item {
    margin-bottom: 0;
  }
}

.collapseArea_body {
  padding-top: 10px;
  padding: 0 20px 0 0px;
}
</style>
